<template>
    <div class="wrapper">
        <div class="content" @click="click">
            <i class="fa fa-arrows-alt"/><span class="screenfull-text">全屏显示</span>
        </div>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import screenfull from 'screenfull';

    @Component
    export default class Screenfull extends Vue {
        private isFullscreen: boolean = false;

        click() {
            if (!screenfull.isEnabled) {
                this.$message({
                    message: '您的浏览器无法进入全屏模式',
                    type: 'warning'
                });
                return false
            }
            screenfull.toggle()
        }

        change() {
            this.isFullscreen = (screenfull as any).isFullscreen;
        }

        init() {
            if (screenfull.isEnabled) {
                screenfull.on('change', this.change)
            }
        }

        destroy() {
            if (screenfull.isEnabled) {
                screenfull.off('change', this.change)
            }
        }

        mounted() {
            this.init()
        }

        beforeDestroy() {
            this.destroy()
        }
    }
</script>

<style scoped lang="scss">
    .wrapper {
        color: #ffffff;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px;
        cursor: pointer;

        .content {
            .screenfull-text {
                margin-left: 3px;
            }
        }

        &:hover {
            background-color: rgba(0, 0, 0, .1);
        }
    }
</style>

